import { getCheckQualityResult } from '@/services/global/base';
import { Button } from 'antd';
import { useState } from 'react';
import AudioCheckIcon from '../AudioCheckIcon';
import styles from './style.less';

type Props = {
  mediaPath: string;
};

const CheckAudioQuality: React.FC<Props> = ({ mediaPath }) => {
  const [loading, setLoading] = useState(false);
  const [checkQuality, setCheckQuality] = useState('');

  const onCheckQuality = async () => {
    setLoading(true);
    const res = await getCheckQualityResult(mediaPath);
    setLoading(false);
    setCheckQuality(res.data.length > 0 ? res.data[0].checkQuality : '');
  };

  return (
    <div className={styles.checkAudioQuality}>
      <Button
        type="link"
        className="linkBtn"
        loading={loading}
        onClick={onCheckQuality}
        disabled={!mediaPath}
      >
        音质检测
      </Button>
      {checkQuality !== '' && (
        <span className={styles.audioCheckIcon}>
          <AudioCheckIcon quality={checkQuality} />
        </span>
      )}
    </div>
  );
};

export default CheckAudioQuality;
